<template>
	<view class="content">
		<view class="show-top">
			<view class="title">{{title}}</view>
			<view class="show-time">
				<text class="t">发布时间：{{update_time | date('yyyy-mm-dd')}}</text>
				<text>浏览人数：{{click}}次</text>
			</view>
		</view>
		<view class="art-content">
			<u-parse :html="content" :show-with-animation="true">
				<u-empty text="暂无文字内容介绍" mode="data"></u-empty>
			</u-parse>
		</view>
		<u-button class="backlist" @click="backlist" >返回列表页</u-button>
		<view class="updown">
			<text @tap="openinfo" :data-id="previd" class="text">上一篇：{{prevtitle}}</text>
			<u-line color="#f3f4f6" :hair-line="false"></u-line>
			<text @tap="openinfo" :data-id="nextid" class="text">下一篇：{{nexttitle}}</text>
		</view>
		<home-footer></home-footer>
	</view>
</template>

<script>
	import homeFooter from '@/pages/tabbar/tabbar.vue';
	export default {
		components: {
			homeFooter
		},
		data() {
			return {
				title: '',
				content: '',
				update_time: '',
				nextid: "",
				nexttitle: "",
				previd: "",
				prevtitle: "",
				click: "",
				cid:''
			}
		},

		onLoad: function(e) {
			this.$u.api.getContent({
				id: e.show
			}).then(res => {
				console.log(res.data);
				this.title = res.data.title;
				this.cid = res.data.cid;
				this.content = res.data.content;
				this.update_time = res.data.update_time;
				this.nextid = res.data.next.id;
				this.nexttitle = res.data.next.title;
				this.previd = res.data.prev.id;
				this.prevtitle = res.data.prev.title;
				this.click = res.data.click;
				// #ifdef  MP-BAIDU
				// 百度小程序TDK配置
				swan.setPageInfo({
					title: res.data.seo_title,
					keywords: res.data.seo_keywords,
					description: res.data.seo_description,
					image: res.data.pic,
				});
				// #endif
				uni.setNavigationBarTitle({
					title: res.data.category.title,
				})
			});

		},
		methods: {
			openinfo(e) {
				var prosid = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../info/news_show?show=' + prosid
				});
			},
			backlist() {
				console.log(this.cid);
				uni.navigateTo({
					url: '../list/news_list?show=' + this.cid
				});
			},

		},
	}
</script>

<style>
	page {
		background-color: #f3f4f6;
	}

	.show-top {
		background-color: #FFFFFF;
		padding: 30upx 20upx;
		border-radius: 3px;
	}

	.content {
		padding: 10upx 2%;
		width: 100%;
		margin: auto;
		flex-wrap: wrap;
	}

	.title {
		font-weight: 700;
		line-height: 1.2;
		padding-left: 30upx;
		border-left: 15upx solid #E97017;
		font-size: 34upx;
		margin-bottom: 20upx;
	}

	.art-content {
		line-height: 2em;
		background-color: #FFFFFF;
		padding: 25upx 20upx;
		border-radius: 3px;
		margin-top: 15upx;
		font-size: 26upx;
		color: #606266;

	}
	
	.updown {
		width: 100%;
		background-color: #FFFFFF;
		padding: 0upx 20upx;
		margin-top: 15upx;
		border-radius: 3px;
	}

	.updown .text {
		display: block;
		font-size: 22upx;
		padding: 28upx 5upx;
		line-height: 2em;
		color: #606266;
	}
	.show-time{
		display: flex;
		justify-content: flex-start;
		color: #82848a;
		font-size: 24upx;
		margin-top: 18upx;
	}
	.show-time .t{
		margin-right: 25upx;
	}
</style>
